import React, { memo, useEffect, useState } from 'react';
//redux相关
import {useSelector,shallowEqual, useDispatch} from 'react-redux'

//antd相关
import { Layout, Menu, Dropdown,Avatar, Badge} from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { DashboardOutlined,UnorderedListOutlined,SettingOutlined } from '@ant-design/icons';

//路由相关
import { NavLink } from 'react-router-dom';
import { adminRourts } from "../../router";

//样式相关
import logo from '@/assects/images/logo.png';
import { DivWrapper } from './style';
import './style.css'; 

//dispatch
import { getInitialInformations } from '../../store/notisficationStore/actionCreators';
import {logout} from '../../store/loginStore/actionCreators';


//组件相关
const { Header, Content, Sider } = Layout;


export default memo(function Frame(props) {
    const menus = adminRourts.filter(route => route.isNav===true);

    //redux
    const notifications = useSelector(state => state.notifications, shallowEqual);
    const user = useSelector(state => state.user, shallowEqual);
    const informationCounts = notifications.list.filter(item => item.hasRead===false).length;

    
    //定义状态
    const [pathName, setPathName] = useState(menus[0].pathname);
    const [avatar, setAvatar] = useState('');
    const [disPlayName, setDisPlayName] = useState('');
    const [isLogout, setIsLogout] = useState(false);

    //dispatch相关
    const dispatch = useDispatch();

    //useEffect相关，改变状态
    useEffect(()=> {
        // console.log(props);
        const currentPathName = props.children._owner.pendingProps.location.pathname;
        // const currentPathName = menus[2].pathname;
        //  console.log(currentPathName);
         setPathName(currentPathName);
    }, [menus, props])

    useEffect(() => {
        setAvatar(user.avatar);
        setDisPlayName(user.displayName);
    },[user.avatar, user.disPlayName, user] )

    useEffect(() => {
        dispatch(getInitialInformations());
    }, [dispatch])

    //退出登录
    useEffect(() => {
        // console.log('isLogout',isLogout);
        if(user.isLogin===true && isLogout===true)
        {
            dispatch(logout())
        }
        // console.log('user.islogin',user.isLogin);
    }, [user.isLogin, isLogout, user,dispatch])
    const dropDownMenuClick = ({key}) => {
        // console.log(key);
        // console.log(props);
        // console.log(props.children._owner.pendingProps.history);
        if(key === '/logout')
        {
            //清除登录信息跳转到登录页面
            // props.children._owner.pendingProps.history.push(key);
            // dispatch(logout());
            setIsLogout(true);
            // console.log('isLogout',isLogout);
            
        }else {
            props.children._owner.pendingProps.history.push(key);
        }
        
    }
    const Menus = (
        <Menu onClick={dropDownMenuClick}>
          <Menu.Item key="/admin/notifications">
            <Badge dot={Boolean(informationCounts)} offset={[20,7]}>
                通知中心
            </Badge>
          </Menu.Item>
          <Menu.Item key="/admin/profile">
              个人设置
          </Menu.Item>
          <Menu.Item key="/logout">
              退出登录
          </Menu.Item>
        </Menu>
      )


    //对路径的处理
    const pathNameArr = pathName.split('/');
    pathNameArr.length = 3;

    return (
        <Layout>
            <Header className="header YTheader" >
                <DivWrapper className="logo">
                    <img src={logo} alt="logo"/>
                </DivWrapper>
                <div>
                <Dropdown overlay={Menus} trigger={['click']} className="dropDown">
                    <Badge count={informationCounts} offset={[-9,7]}>
                        <div  onClick={e => e.preventDefault()} style={{display:'flex',alignItems:'center'}}>
                            <Avatar src={avatar} />
                            <span>Hello! {disPlayName} </span>
                            <DownOutlined />
                        </div>
                    </Badge>
                </Dropdown>
                </div>
            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={[pathNameArr.join('/')]}
                        selectedKeys={[pathNameArr.join('/')]}   
                        style={{ height: '100%', borderRight: 10 }}

                    >
                        <Menu.Item
                            key={menus[0].pathname}
                            icon={<DashboardOutlined/>}>
                            {/*<NavLink to="/admin/dashboard" exact>{menus[0].title}</NavLink>*/}
                            {menus[0].title}
                        </Menu.Item>
                        <Menu.Item
                            key={menus[1].pathname}
                            icon={<UnorderedListOutlined/>}>
                            <NavLink to="/admin/article" exact>{menus[1].title}</NavLink>
                        </Menu.Item>
                        <Menu.Item
                            key={menus[2].pathname}
                            icon={<SettingOutlined/>}>
                            {/*<NavLink to="/admin/settings" exact>{menus[2].title}</NavLink>*/}
                            {menus[2].title}
                        </Menu.Item>

                    </Menu>
                </Sider>
                <Layout style={{ padding: '0 0px 24px' }}>
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 10,
                            margin: 0,
                            minHeight: 800
                        }}
                    >
                        {props.children} 
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
})
